import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  SearchWrapper
} from '../style'

class Search extends Component {
  constructor(props) {
    super(props)
    this.timerr = null
    this.timer = null
    this.state = {
      searchTips: ['搜不到？', '请输入正确的关键词。'],
      text: '',
      name: '',
    }
  }
  render() {
    return (
      <SearchWrapper className={this.state.name}>
        <input placeholder={this.state.text} type="text" />
        <button onClick={this.searchHandle} className="iconfont">
          &#xe60a;
        </button>
      </SearchWrapper>
    )
  }
  componentWillReceiveProps(props){//组件接收到新的props值时触发
    this.setState({
      name: props.style
    })
  }
  componentDidMount() {
    this.searchTipsShow()
  }
  componentWillUnmount() {
    clearInterval(this.timer)
    clearTimeout(this.timerr)
  }
  searchTipsShow(a = 0, b = 0) { //搜索框提示文字效果
    clearInterval(this.timer)
    //clearTimeout(this.timerr)
    let datas = this.state.searchTips
    let len_w = datas.length
    let i = a
    let x = b
    let text = ''
    this.timer = setInterval(() => {
      let len_l = datas[i].length
      text += datas[i][x]
      if (x < len_l - 1) {
        this.setState({
          text: text + '|'
        })
      } else {
        this.setState({
          text: text
        },() =>{
          clearInterval(this.timer)
          this.timerr = setTimeout(() => {
            this.searchTipsShow(i, x)
          }, 800)
        })
      }
      x++
      if (x === len_l) {
        text = ''
        x = 0
        i++
        if (i === len_w) {
          i = 0
        }
      }
    }, 200)
  }
  searchHandle(){ //搜索点击

  }
}


const SearchState = (state) => {
  return {
    widthTf: state.getIn(['home','widthTf'])
  }
}

const SearchDispatch = (dispatch) => {
  return {

  }
}

export default connect(SearchState, SearchDispatch)(Search)